<template>
	<view class="center">
		<view class="search">
			<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholderStyle="font-size:30rpx" placeholder="搜索内容" @iconClick="iconClick"></uni-easyinput>
			<view class="task" @click="myTask">
				<image src="@/static/image/mission/task.png" mode=""></image>
				我的任务
			</view>
		</view>
		<view class="list">
			<uni-list :border="false">
				<view class="card" @click="clickCard(item._id)" v-for="(item,index) in showList" :key="index" >
					<view class="title">{{item.task_name}}</view>
					<view class="time">{{item.created_at | timeFormat('YYYY-MM-DD HH:mm')}}</view>
				</view>
				<xbd-null-list v-if="!showList.length"></xbd-null-list>
				<xbd-loading-more v-if="showList.length" :status-num="statusNum" :is-load-more="isLoadMore">
				</xbd-loading-more>
			</uni-list>
		</view>
		
		
	</view>
</template>

<script>
	import {
		Mission
	} from '@/api/index.js';
	export default {
		data() {
			return {
				statusNum: 0,
				isLoadMore: false,
				value:'',
				showList:[],
				info: {
					page: 1,
					perpage: 10,
					keyword: ''
				}
			};
		},
		methods:{
			clickCard(val){
				uni.navigateTo({
				  url: `/pages/mission/learningCenter/detail?id=${val}`,
				});
			},
			myTask(){
				uni.navigateTo({
				  url: "/pages/mission/myTask/myTask",
				});
				
			},
			iconClick(){
				this.info.page = 1
				this.info.keyword = this.value
				this.init()
			},
			async init(){
				const res = await Mission.getknowledge(this.info)
				console.log(res,'res')
				if (res.data.list.length === this.info.perpage) {
					this.isLoadMore = true;
					this.statusNum = 2;
				}
				this.showList = res.data.list
			},
			// 加载更多
			loadmore() {
				this.info.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				this.loadmoreList();
			},
			async loadmoreList() {
				try {
					const res = await Mission.getknowledge(this.info);
					if (res.data.list.length) {
						this.showList = this.showList.concat(res.data.list);
						if (res.data.list.length === this.info.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
						// this.isLoadMore = false;
					} else {
						this.info.page--;
						this.statusNum = 0;
					}
				} catch (e) {
					uni.hideLoading();
					this.info.page--;
				}
			},
		},
		async onLoad(){
			await this.init()
		},
		// 触底触发
		onReachBottom() {
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list{
		background-color: #FFFFFF;
		border-radius: 16rpx;
		// &:nth-child(n){
		// 	margin-bottom: 40rpx;
		// }
	}
	::v-deep .uni-easyinput__content-input{
		height: 56rpx !important;
	}
	::v-deep .uni-icons{
		margin-right: 20rpx;
	}
.center{
	padding:32rpx;
	// background-color: #fff;
	
	.search{
		position: fixed;
		top: 0;
		z-index: 999;
		width: 686rpx;
		box-sizing: border-box;
		background-color: #f5f7fb;
		padding: 30rpx 0;
		display: flex;
		margin-bottom: 32rpx;
		.task{
			margin-left: 32rpx;
			margin-top: 4rpx;
			width: 180rpx;
			height: 60rpx;
			border: 2rpx solid #2E73FC;
			box-sizing: border-box;
			display:flex;
			justify-content: center;
			align-items: center;
			color: #2E73FC;
			font-size: 24rpx;
			border-radius: 30rpx;
			image{
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
		}
	}
	.noList{
		width: 686rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #A0AAC4;
		image{
			margin-top: 200rpx;
			width: 220rpx;
			height: 160rpx;
			margin-bottom: 20rpx;
		}
	}
	.list{
		margin-top: 120rpx;
		padding: 10rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
	}
	.card{
		padding: 40rpx 0;
		border-bottom: 2rpx dashed #e5e5e5;
		.title{
			width: 600rpx;
			font-size: 30rpx;
			color: #000623;
			margin-bottom: 20rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.time{
			font-size: 26rpx;
			color: #A0A7B8;
		}
	}
	.uni-mt-5{
		margin-bottom: 20rpx;
	}
}
</style>
